<template>
    <div class="page-address-list">
        <div>
            <div v-for="(address, index) in addressList"
                :key="index"
                class="position-relative after-line">
                <AddressItem :name="address.name"
                    :mobile="address.mobile"
                    :address="address.province + address.city + address.district + address.detail"
                    :tag="address.title"
                    :is-default="address.is_default"
                    action="编辑"
                    @click="onClickAddress(address)"
                    @action="onAction(address)">
                </AddressItem>
            </div>
        </div>
        <div v-if="addressList.length === 0" class="text-center empty-wrap">
            <span class="icon">&#xe62c;</span>
            <div class="normal-text second-font-color">暂无收货数据</div>
        </div>

        <div class="fixed-btn-wrap">
            <div class="btn btn-mobile btn-red btn-large btn-block btn-rect" @click="onClickAdd">
                新增收货地址
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    api,
} from '@/lib/api';
import store from '@/store';
import AddressItem from '@/features/order/addressItem.vue';
import { Component, Vue } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';
import { Dictionary, Route } from 'vue-router/types/router';

Component.registerHooks([
    'beforeRouteEnter',
]);

/** 地址列表: 1. 单纯编辑查看 2. 在下单之前选择 3. 在下单之后选择 */
@Component({
    name: 'AddressList',
    components: {
        AddressItem,
    },
})
export default class AddressList extends Vue {
    /** 是否允许为订单选择地址 */
    public get enableSelect() {
        return Number(this.$route.query.enableSelect);
    }
    public get orderId() {
        return this.$route.query.order_id;
    }

    /** 地址列表 */
    public get list() {
        return store.state.address.list;
    }

    /** 地址详情 */
    public get detail() {
        return store.state.address.detail;
    }

    /** 地址列表 */
    public get addressList() {
        return (this.list || []).map((id: any) => this.detail[id]);
    }

    /**
     * 点击编辑
     */
    public onAction(address?: Address.ListItem) {
        // api.navigateTo({
        //     url: '/pages/address_add/main',
        //     query: {
        //         address_id: address.id,
        //     },
        // });

        const params: Dictionary<string> = {};
        if (address) {
            params.addressId = address.id + '';
        }

        api.push({
            name: ROUTE_NAME.ADDRESS_ADD,
            params,
        });
    }

    /**
     * 选择地址
     */
    public async onClickAddress(address: any) {
        if (!this.enableSelect) {
            return;
        }
        store.commit('order/setAddressId', address.id);
        wx.navigateBack();
    }

    public onClickAdd() {
        this.onAction();
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        store.commit('utils/startRequest');
        await store.dispatch('address/getList');
        store.commit('utils/endRequest');
        next();
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";

.page-address-list {
    .empty-wrap {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translate(0, -50%);
        color: @third-font-color;
        .icon {
            font-size: 128rpx;
            line-height: 160rpx;
        }
    }
}

</style>
